<template>
  <div class="map">
    <div id="map_box" class="map_box" :style="{ height: (fullHeight-114) + 'px' }">
      <div class="alarmArea" v-show="alarmArea" :style="{left:aleft+'px',top:atop+'px'}">
        <img :src="yuanquan" />
      </div>
    </div>
    <div class="search">
      <div class="search_item">
        <el-autocomplete v-model="fireHydantName" :fetch-suggestions="querySearch" placeholder="请输入监测点名称" :trigger-on-focus="false" size="small">
          <i style="position: relative;top: 7px;right: 7px;" class="el-icon-search" slot="suffix" @click="handleNameClick">
          </i>
        </el-autocomplete>
      </div>
    </div>
    <div class="icon_ident">
      <div>
        <img :src="sc" class="ic_ident" />
        <span class="ic_name">正常</span>
      </div>
      <div>
        <img :src="bf" class="ic_ident" />
        <span class="ic_name">报警</span>
      </div>
      <div>
        <img :src="gw" class="ic_ident" />
        <span class="ic_name">离线</span>
      </div>
    </div>
    <div class="tj_icon" @click="monitoDrawer = true">
      <img :src="tongji" style="width:40px;cursor: pointer;" />
    </div>
    <div class="butbox">
      <div>
        <img @click="fullScreenEvent" :src="quanping" />
      </div>
      <div>
        <el-popover placement="top" title="图层选择" trigger="click">
          <!-- <img :src="tc_ic" class="tc_ic" /> -->
          <div class="tc_dialog">
            <el-tree ref="elTree" :data="treeData" :props="defaultProps" :show-checkbox="true" node-key="id" @check="aaa" default-expand-all>
            </el-tree>
          </div>
          <img style="display: table-cell;vertical-align: middle;" slot="reference" :src="tuceng" />
        </el-popover>
      </div>
      <div>
        <el-badge :value="alertEventList.length" class="alertCount">
          <img style="display: table-cell;vertical-align: middle;" @click="alarmDrawer = true" :src="baojing" />
        </el-badge>
      </div>
      <div>
        <img slot="reference" @click="dq" :src="dangqian" />
      </div>
    </div>
    <!-- 图层控制 -->
    <!-- <div class="tc_dialog" title="图层选择" v-show="tcVisible">
      <div class="close_icon"><i class="el-icon-close" style="z-index:999;cursor: pointer;" @click="tcVisible = false" /></div>
      <el-tree ref="elTree" :data="treeData" :props="defaultProps" :show-checkbox="true" node-key="id" @check="aaa" default-expand-all>
      </el-tree>
    </div> -->
    <!-- 监测点总览 -->
    <div class="overView" v-if="monitoDrawer" :style="{ height: fullHeight + 'px' }">
      <i class="el-icon-close" style="z-index:999;cursor: pointer;position: absolute;top: 25px;right: 20px;" @click="monitoDrawer = false" />
      <div class="drawerContent">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="压力监测" name="first">
            <pressureMonitor />
          </el-tab-pane>
          <el-tab-pane label="流量监测" name="second">
            <flowMonitor />
          </el-tab-pane>
          <el-tab-pane label="水质监测" name="third">
            <qualityMonitor />
          </el-tab-pane>
          <el-tab-pane label="水厂监测" name="fourth">
            <waterplantMonitor />
          </el-tab-pane>
          <el-tab-pane label="泵房监测" name="five">
            <pumproomMonitor />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 实时报警 -->
    <div class="aaa" v-if="alarmDrawer" style="height:815px;">
      <div class="alarmTitle">
        <img :src="bj_ic" class="bj_ic" />
        <div style="margin-left:5px">实时报警({{ alertEventList.length }}条)</div>
        <i class="el-icon-close" style="position:absolute;right:0px;cursor: pointer;" @click="alarmDrawer = false" />
      </div>
      <div style="margin-top:64px;">
        <div v-for="(item, index) in alertEventList" :key="index" @click="viewDetail(index,item.hydrantName)" :style="index==current?active:''" class="item_box">
          <div class="box">
            <div class="verti_left">
              <div class="hydrantName fontAa">{{ item.hydrantName }}</div>
              <div class="param fontAa">
                <span>{{ item.parameterName }}</span><span style="margin-left:6px;">{{ item.alertValue }}{{ item.unit }}</span>
              </div>
            </div>
            <div class="verti_right">
              <div class="fontAa" style="width:140px;">{{ item.startDate }}</div>
              <div class="continue fontAa">
                持续时间<span style="color:red;">{{ item.duration }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tongji from "@/assets/image/fireCont/展开.svg";
import zhedie from "@/assets/image/fireCont/折叠.svg";
import quanping from "@/assets/image/fireCont/ic_quanping.svg";
import tuceng from "@/assets/image/fireCont/ic_tuceng.svg";
import baojing from "@/assets/image/fireCont/ic_baojing.svg";
import dangqian from "@/assets/image/fireCont/ic_dangqian.svg";
import yuanquan from "@/assets/image/fireCont/area.svg";
import back from "@/assets/image/fireCont/back.svg";
import sc from "@/assets/image/shcedule/sc.svg";
import bf from "@/assets/image/shcedule/bf.svg";
import gw from "@/assets/image/shcedule/gw.svg";
import tc_view from "@/assets/image/fireCont/查看.svg";
import noview from "@/assets/image/fireCont/不查看.svg";
import tc_ic from "@/assets/image/fireCont/tc_ic.svg";
import bj_ic from "@/assets/image/fireCont/bj_ic.svg";
import AlarmTrend from "@/components/schedule/fireCont/alarmTrend.vue";
import flowMonitor from "./components/flowMonitor/index.vue";
import pressureMonitor from "./components/pressureMonitor/index.vue";
import qualityMonitor from "./components/qualityMonitor/index.vue";
import waterplantMonitor from "./components/waterplantMonitor/index.vue";
import pumproomMonitor from "./components/pumproomMonitor/index.vue";
//接口
import {
  findFlHydrantList,
  searchFlHydrantList,
  searchflHydrantAlertEvents,
  findAlarmTypeFilter
} from "@/api/schedule/gisHydrant/index"
import {
  searchFlPoint,
} from "@/api/schedule/gisSchedule/index"
import {
  getRealtimeReportData,//查询实时数据(泵房总览-泵房列表)
} from "@/api/schedule/base/flOverviewPump/index";
import {
  getToken
} from "utils/auth";
export default {
  components: {
    tongji,
    zhedie,
    quanping,
    tuceng,
    baojing,
    dangqian,
    AlarmTrend,
    yuanquan,
    back,
    sc,
    bf,
    gw,
    tc_ic,
    bj_ic,
    tc_view,
    noview,
    flowMonitor,
    pressureMonitor,
    qualityMonitor,
    waterplantMonitor,
    pumproomMonitor
  },
  data () {
    return {
      activeName: 'first',
      center: [114.086169, 22.543606],
      zoom: 17,
      treeData: [
        {
          id: 2,
          label: '全部',
          children: [
            {
              id: 3,
              parma: "highLimitAlarm",
              label: '压力点'
            },
            {
              id: 4,
              icon: 1,
              parma: "lowLimitAlarm",
              label: '水质点'
            },
            {
              id: 5,
              icon: 1,
              parma: "toppleAlarm",
              label: '流量点'
            },
            {
              id: 6,
              icon: 1,
              parma: "lowBatteryAlarm",
              label: '消防栓'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      active: "background:#EBF5FF",
      current: "",
      alarmArea: false,
      alarmMenu: false,
      aleft: "",
      atop: "",
      fullHeight: window.innerHeight,
      tongji: tongji,
      zhedie: zhedie,
      quanping: quanping,
      tuceng: tuceng,
      baojing: baojing,
      dangqian: dangqian,
      yuanquan: yuanquan,
      back: back,
      sc: sc,
      bf: bf,
      gw: gw,
      tc_ic: tc_ic,
      bj_ic: bj_ic,
      tc_view: tc_view,
      tcVisible: false,
      dhVisible: false,
      noview: noview,
      monitoDrawer: true,
      alarmVisible: false,
      direction: 'rtl',
      alarmDrawer: false,
      alertEventList: [],
      cpoint: [],
      searchBox: false,
      searchvalue: "1000",
      options: [
        {
          label: "500m",
          value: "500"
        },
        {
          label: "1km",
          value: "1000"
        },
        {
          label: "2km",
          value: "2000"
        }
      ],
      fireCont: false,
      hydrantTableData: [],
      //窗体
      infoWindow: null,
      winInfo: [],
      winTitle: [],
      map: "",
      fireHydrantList: [],
      fireHydrantNameList: [],
      fireHydantName: "",
      tjObl: {},
      items: "",
      map: null,
      vectorLayer: null,
      hydrantData: [],
      map: "",
      enNames: [],
      markers: [],
      limitConnect: 3,
      timeConnect: 0,
      icFlag: true,
      labels: ['水压高报警', '水压低报警', '倾倒报警', '电池欠压报警', '空管报警', '撞击报警', '探头通讯失败', '疑似漏水报警', '移位报警', '开阀报警', '结冰报警', '在线', '离线']
    };
  },
  created () {
  },
  mounted () {
    this.get_bodyHeight()
    this.addEventListener()
    this.handleFlPoint()
    // this.handleFlHydrantList()
    this.findFlHydrantState()
    this.searchAlertEvents()
    // this.$nextTick(() => {
    //   this.$refs.elTree.setCheckedNodes(this.treeData);//数据请求成功后，设置默认current
    // });
    this.initWebsocket()
  },
  watch: {

  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
    },
    handleFlPoint () {
      let obj = {}
      searchFlPoint(obj).then(response => {
        this.fireHydrantList = response.data
        this.fireHydrantList.map(item => {
          let reportObj = {
            monitorPointId: item.id,
            type: item.type
          }
          let reportDataObj = {}
          getRealtimeReportData(reportObj).then(response => {
            reportDataObj = response.data[0]
            item['reportDataObj'] = reportDataObj
            this.init()
          }).catch(err => {
          })
        })
      }).catch(err => {
        debugger
      })
    },
    querySearch (queryString, cb) {
      if (queryString != "") {
        let callBackArr = []
        console.log(this.fireHydrantNameList)
        this.fireHydrantNameList.map(item => {
          if (item.indexOf(queryString) > -1) {
            let obj = { value: item }
            callBackArr.push(obj)
          }
        })
        if (callBackArr.length == 0) {
          cb(["暂无数据"]);
        } else {
          cb(callBackArr);
        }
      }
    },
    aaa () {
      let checkNode = this.$refs.elTree.getCheckedNodes()
      let checkYeNode = checkNode.filter(item => !item.children)
      console.log(checkYeNode)
      let labels = []
      checkYeNode.map(item => {
        labels.push(item.label)
      })
      this.labels = labels
      this.map.remove(this.markers)
      let List = this.fireHydrantList
      this.opeRaMarkers(List, labels)
    },
    initWebsocket () {
      let socket = new WebSocket("ws://" + "140.249.214.1:9905" + "/socketServer/" + "addHydrantAlert" + '?token=' + getToken())
      // let socket = new WebSocket("ws://" + "150.139.197.219:80" + "/socketServer/" + "addHydrantAlert" + '?token=' + getToken())
      socket.onopen = () => {
        console.log('实时报警已连接', "111111");
      }
      socket.onmessage = (e) => {
        searchFlHydrantList().then(response => {
          let ids = []
          this.fireHydrantList = response.data
          this.fireHydrantList.map(item => {
            ids.push(item.id)
          })
          let obj = {
            ids: ids.toString()
          }
          searchFlHydrantLatestData(obj).then(response => {
            let data = response.data
            let LatestData = this.fireHydrantList.map(item => {
              data.map(i => {
                if (item.id == i.hydrantId) {
                  i.location = item.location
                  item = i
                }
              })
              return item
            })
            this.fireHydrantList = LatestData,
              this.fireHydrantList.map(item => {
                this.fireHydrantNameList.push(item.hydrantName)
              })
            this.opeRaMarkers(this.fireHydrantList, this.labels)
          }).catch(error => {
          });
        }).catch(error => {
        });
        this.searchAlertEvents()
      }
      socket.onclose = () => {
        console.log('服务器已经断开');
        this.reconnect();
      }
    },
    reconnect () {
      let that = this
      if (that.limitConnect > 0) {
        that.limitConnect--;
        that.timeConnect++;
        console.log('第' + that.timeConnect + '次重连');
        setTimeout(function () {
          that.initWebsocket();
        }, 2000)
      } else {
        console.log('TCP连接已超时');
      }
    },
    //获取消防栓统计信息
    findFlHydrantState () {
      findFlHydrantList().then(response => {
        this.tjObl = response.data
        console.log(this.tjObl)
      }).catch(error => {
      });
    },
    //获取实时数据
    searchAlertEvents () {
      let obj = {}
      searchflHydrantAlertEvents(obj).then(response => {
        // this.alertEventList = this.MsgSort(response.data)
        console.log(response.data)
        let EventsList = this.MsgSort(response.data)
        setInterval(() => {
          this.alertEventList = EventsList.map(item => {
            var nowtime = new Date() //获取当前时间
            var startTime = new Date(item.startDate);  //定义结束时间
            var lefttime = nowtime.getTime() - startTime.getTime()  //距离结束时间的毫秒数
            var leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24))  //计算天数
            var lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24)  //计算小时数
            var leftm = Math.floor(lefttime / (1000 * 60) % 60)  //计算分钟数
            var lefts = Math.floor(lefttime / 1000 % 60)  //计算秒数
            item.duration = leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒";
            return item
          })
        }, 1000);
      }).catch(error => {
      });
    },
    //排序
    MsgSort (obj) {
      obj.sort((a, b) => {
        let t1 = new Date(Date.parse(a.startDate.replace(/-/g, "/")))
        let t2 = new Date(Date.parse(b.startDate.replace(/-/g, "/")))
        return t2.getTime() - t1.getTime()
      })
      return obj
    },
    //点击名字查询
    handleNameClick () {
      this.handleSearchClick(this.fireHydantName)
    },
    //根据名字查询
    handleSearchClick (fireHydantName) {
      let obj = {
        name: fireHydantName
      }
      searchFlHydrantList(obj).then(response => {
        let centerlocation = response.data[0].location.split(",")
        let centerLng = parseFloat(centerlocation[0])
        let centerLat = parseFloat(centerlocation[1])
        this.center = [centerLng, centerLat]
        this.zoom = 19.5
        this.init(this.fireHydrantList)
      }).catch(error => {
      });
    },
    viewDetail (index, hydrantName) {
      this.current = index,
        this.handleSearchClick(hydrantName)
    },
    //刷新
    dq () {
      this.center = ""
      this.zoom = 17
      this.fireHydantName = ""
      this.init(this.fireHydrantList)
    },
    closeSearch () {
      this.alarmArea = false,
        this.fireCont = false
    },
    //绑定全屏监听事件
    addEventListener () {
      let isFullscreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen;
      isFullscreen = !!isFullscreen;
      let that = this;
      document.addEventListener("fullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("mozfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
      document.addEventListener("msfullscreenchange", () => {
        that.isFullScren = !that.isFullScren;
      });
    },
    //点击全屏事件
    fullScreenEvent () {
      let el = document.documentElement;
      if (this.isFullScren) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
          el.webkitRequestFullScreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      }
    },
    init () {
      console.log()
      var that = this
      let marker, map = new AMap.Map('map_box', {
        rotateEnable: true,
        pitchEnable: true,
        zoom: that.zoom,
        pitch: 75,
        rotation: -15,
        viewMode: '3D', //开启3D视图,默认为关闭
        center: that.center,
        terrain: true,
      });
      var styleName = "amap://styles/color";
      map.setMapStyle(styleName);
      that.map = map
      //3D罗盘
      let controlBar = new AMap.ControlBar({
        position: {
          right: '7px',
          bottom: '130px'
        }
      });
      controlBar.addTo(map);
      //缩放
      let toolBar = new AMap.ToolBar({
        position: {
          right: '37px',
          bottom: '50px'
        }
      });
      toolBar.addTo(map);
      let level = map.getZoom()
      that.fireHydrantList.map(item => {
        if (item.location) {
          let markerContent
          let ic
          let type = item.type
          let classify = item.classify
          let location = item.location.split(",")
          if (type == 1) {
            ic = that.sc
            markerContent =
              `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>清水池液位</div>
                 <div>清水池浊度</div>
                 <div>清水池余氯</div>
                 <div>出厂水压</div>
                 <div>出厂流量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDate == undefined ? "" : item.reportDate}</div>
                 <div>${item.reportDataObj.cleanLevel == undefined ? "" : item.reportDataObj.cleanLevel}</div>
                 <div>${item.reportDataObj.cleanTurbidity == undefined ? "" : item.reportDataObj.cleanTurbidity}</div>
                 <div>${item.reportDataObj.cleanChlorine == undefined ? "" : item.reportDataObj.cleanChlorine}</div>
                 <div>${item.reportDataObj.outPressure == undefined ? "" : item.reportDataObj.outPressure}</div>
                 <div>${item.reportDataObj.outflow == undefined ? "" : item.reportDataObj.outflow}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
          }
          if (type == 2) {
            ic = that.bf
          //   markerContent =
          //     `<div class="card">
          //    <div class="aaa_na">
          //      ${item.name}
          //    </div>
          //    <div class="card_content">
          //      <div class="card_left">
          //        <div>上报时间</div>
          //        <div>高区出水压力</div>
          //        <div>中区出水压力</div>
          //        <div>低区出水压力</div>
          //        <div>进水压力</div>
          //        <div>出水流量</div>
          //        <div>今日供水量</div>
          //      </div>
          //      <div class="card_right">
          //        <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
          //        <div>${item.reportDataObj.houseHighPressure == undefined ? "" : item.reportDataObj.houseHighPressure}</div>
          //        <div>${item.reportDataObj.houseMidPressure == undefined ? "" : item.reportDataObj.houseMidPressure}</div>
          //        <div>${item.reportDataObj.houseLowPressure == undefined ? "" : item.reportDataObj.houseLowPressure}</div>
          //        <div>${item.reportDataObj.houseInPressure == undefined ? "" : item.reportDataObj.houseInPressure}</div>
          //        <div>${item.reportDataObj.houseOutflow == undefined ? "" : item.reportDataObj.houseOutflow}</div>
          //        <div>${item.reportDataObj.houseOutflowToday == undefined ? "" : item.reportDataObj.houseOutflowToday}</div>
          //      </div>
          //    </div>
          //    <img src="${ic}" style="width:35px;height:35px;"/>
          //  </div>`
            if (classify == 51) {
              markerContent =
                `<div class="card">
             <div class="aaa_na">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>高区出水压力</div>
                 <div>中区出水压力</div>
                 <div>低区出水压力</div>
                 <div>进水压力</div>
                 <div>出水流量</div>
                 <div>今日供水量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.houseHighPressure == undefined ? "" : item.reportDataObj.houseHighPressure}</div>
                 <div>${item.reportDataObj.houseMidPressure == undefined ? "" : item.reportDataObj.houseMidPressure}</div>
                 <div>${item.reportDataObj.houseLowPressure == undefined ? "" : item.reportDataObj.houseLowPressure}</div>
                 <div>${item.reportDataObj.houseInPressure == undefined ? "" : item.reportDataObj.houseInPressure}</div>
                 <div>${item.reportDataObj.houseOutflow == undefined ? "" : item.reportDataObj.houseOutflow}</div>
                 <div>${item.reportDataObj.houseOutflowToday == undefined ? "" : item.reportDataObj.houseOutflowToday}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            } else if(classify == 52) {
              markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>出水压力</div>
                 <div>进水压力</div>
                 <div>出水流量</div>
                 <div>今日供水量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.houseOutPressure == undefined ? "" : item.reportDataObj.houseOutPressure}</div>
                 <div>${item.reportDataObj.houseInPressure == undefined ? "" : item.reportDataObj.houseInPressure}</div>
                 <div>${item.reportDataObj.houseOutflow == undefined ? "" : item.reportDataObj.houseOutflow}</div>
                 <div>${item.reportDataObj.houseOutflowToday == undefined ? "" : item.reportDataObj.houseOutflowToday}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            } else {
              markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>进水压力</div>
                 <div>出水流量</div>
                 <div>今日供水量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.houseInPressure == undefined ? "" : item.reportDataObj.houseInPressure}</div>
                 <div>${item.reportDataObj.houseOutflow == undefined ? "" : item.reportDataObj.houseOutflow}</div>
                 <div>${item.reportDataObj.houseOutflowToday == undefined ? "" : item.reportDataObj.houseOutflowToday}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            }
          }
          if (type == 3) {
            ic = that.gw
          //   markerContent =
          //   `<div class="card">
          //    <div class="name">
          //      ${item.name}
          //    </div>
          //    <div class="card_content">
          //      <div class="card_left">
          //        <div>上报时间</div>
          //        <div>管网水压</div>
          //      </div>
               
          //    </div>
          //    <img src="${ic}" style="width:35px;height:35px;"/>
          //  </div>`
            if (classify == 74) {
              markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网水压</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipePressure == undefined ? "" : item.reportDataObj.pipePressure}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            } else if (classify == 75) {
              markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网流量</div>
                 <div>管网今日供水量</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipeFlow == undefined ? "" : item.reportDataObj.pipeFlow}</div>
                 <div>${item.reportDataObj.pipeFlowToday == undefined ? "" : item.reportDataObj.pipeFlowToday}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            } else {
              markerContent =
            `<div class="card">
             <div class="name">
               ${item.name}
             </div>
             <div class="card_content">
               <div class="card_left">
                 <div>上报时间</div>
                 <div>管网浊度</div>
                 <div>管网余氯</div>
                 <div>管网PH</div>
               </div>
               <div class="card_right">
                 <div class="date">${item.reportDataObj.createDate == undefined ? "" : item.reportDataObj.createDate}</div>
                 <div>${item.reportDataObj.pipeTurbidity == undefined ? "" : item.reportDataObj.pipeTurbidity}</div>
                 <div>${item.reportDataObj.pipeChlorine == undefined ? "" : item.reportDataObj.pipeChlorine}</div>
                 <div>${item.reportDataObj.pipePh == undefined ? "" : item.reportDataObj.pipePh}</div>
               </div>
             </div>
             <img src="${ic}" style="width:35px;height:35px;"/>
           </div>`
            }
          }
          marker = new AMap.Marker({
            map: map,
            position: [location[0], location[1]],
            content: markerContent,
            offset: new AMap.Pixel(-13, -30)
          });
          that.markers.push(marker)
        } else {

        }
      })
    },
    get_bodyHeight () {
      //动态获取浏览器高度
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //操控markers
    opeRaMarkers (List, labels) {
      console.log(List)
      var that = this
      var map = that.map
      var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(6, -30) })
      List.map(item => {
        let unit = ""
        if (item.metaProductCode == "000002") {
          unit = "%"
        } else {
          unit = "V"
        }
        if (item.alertNames) {
          let alertNameList = item.alertNames.split(",")
          let flagList = []
          if (labels.includes("在线") == true && labels.includes("离线") == false) {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.sc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bf
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.gw
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            } else {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.sc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bf
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  });
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.gw
                  state = '离线'
                }
              } else {
              }
            }
          } else if (labels.includes("离线") == true && labels.includes("在线") == false) {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.sc
                  state = '正常'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 2) {
                  ic = that.bf
                  state = '报警'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
                if (item.state == 3) {
                  ic = that.gw
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            } else {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.sc
                  state = '正常'
                }
                if (item.state == 2) {
                  ic = that.bf
                  state = '报警'
                }
                if (item.state == 3) {
                  ic = that.gw
                  state = '离线'
                  var marker = new AMap.Marker({
                    map: that.map,
                    position: [location[0], location[1]],
                    icon: ic,
                    offset: new AMap.Pixel(-13, -30)
                  })
                  that.markers.push(marker)
                  marker.content =
                    `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                  marker.on('click', function (e) {
                    infoWindow.setContent(e.target.content);
                    infoWindow.open(map, e.target.getPosition());
                  });
                }
              } else {
              }
            }
          } else if (labels.includes("离线") == true && labels.includes("在线") == true) {
            if (item.location) {
              let ic = ""
              let state = ""
              let location = item.location.split(",")
              if (item.state == 1 || item.state == undefined || item.state == null) {
                ic = that.sc
                state = '正常'
              }
              if (item.state == 2) {
                ic = that.bf
                state = '报警'
              }
              if (item.state == 3) {
                ic = that.gw
                state = '离线'
              }
              var marker = new AMap.Marker({
                map: that.map,
                position: [location[0], location[1]],
                icon: ic,
                offset: new AMap.Pixel(-13, -30)
              });
              that.markers.push(marker)
              marker.content =
                `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
              marker.on('click', function (e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
              });
            } else {
            }
          } else {
            alertNameList.map(item => {
              if (labels.includes(item) == true) {
                flagList.push(1)
              } else {
                flagList.push(0)
              }
            })
            if (flagList.includes(1)) {
              if (item.location) {
                let ic = ""
                let state = ""
                let location = item.location.split(",")
                if (item.state == 1 || item.state == undefined || item.state == null) {
                  ic = that.sc
                  state = '正常'
                }
                if (item.state == 2) {
                  ic = that.bf
                  state = '报警'
                }
                if (item.state == 3) {
                  ic = that.gw
                  state = '离线'
                }
                var marker = new AMap.Marker({
                  map: that.map,
                  position: [location[0], location[1]],
                  icon: ic,
                  offset: new AMap.Pixel(-13, -30)
                });
                that.markers.push(marker)
                marker.content =
                  `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
                marker.on('click', function (e) {
                  infoWindow.setContent(e.target.content);
                  infoWindow.open(map, e.target.getPosition());
                });
              } else {
              }
            } else {
            }
          }
        } else {
          let alertNameList = []
          let flagList = []
          if (item.location) {
            let ic = ""
            let state = ""
            let location = item.location.split(",")
            if (item.state == 1 || item.state == undefined || item.state == null) {
              ic = that.sc
              state = '正常'
            }
            if (item.state == 2) {
              ic = that.bf
              state = '报警'
            }
            if (item.state == 3) {
              ic = that.gw
              state = '离线'
            }
            var marker = new AMap.Marker({
              map: that.map,
              position: [location[0], location[1]],
              icon: ic,
              offset: new AMap.Pixel(-13, -30)
            });
            that.markers.push(marker)
            marker.content =
              `<div class="card">
              <div class="name">${item.hydrantName || item.name}</div>
              <div class="card_content">
                  <div class="card_line">
                    <div class="card_left">上报时间</div>
                    <div class="card_right">${item.reportDate == undefined ? "\xa0" : item.reportDate}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">水压</div>
                    <div class="card_right" style="${alertNameList.includes('水压低报警') == true || alertNameList.includes('水压高报警') == true ? 'color:red' : ''}">${item.pressure == undefined ? "\xa0" : item.pressure + 'MPa'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">流量</div>
                    <div class="card_right" style="${alertNameList.includes('疑似漏水报警') == true ? 'color:red' : ''}">${item.flow == undefined ? "\xa0" : item.flow + 'm³/h'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">温度</div>
                    <div class="card_right" style="${alertNameList.includes('温度高报警') == true || alertNameList.includes('温度低报警') == true ? 'color:red' : ''}">${item.temperature == undefined ? "\xa0" : item.temperature + '°C'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">电池电压</div>
                    <div class="card_right" style="${alertNameList.includes('电池欠压报警') == true ? 'color:red' : ''}">${item.battery == undefined ? "\xa0" : item.battery + unit}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">阀门状态</div>
                    <div class="card_right">${item.openingName ? item.openingName : "\xa0"}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">倾斜角度</div>
                    <div class="card_right" style="${alertNameList.includes('倾倒报警') == true ? 'color:red' : ''}">${item.angle == undefined ? "\xa0" : item.angle + '°'}</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">安装位置</div>
                    <div class="card_right" style="word-wrap: break-word">${item.installAddress == undefined ? "\xa0" : item.installAddress}(${item.location == undefined ? "\xa0" : item.location})</div>
                  </div>
                  <div class="card_line">
                    <div class="card_left">报警信息</div>
                    <div class="card_right" style="word-wrap: break-word">${item.alertNames == undefined ? "\xa0" : item.alertNames}</div>
                  </div>
                </div>
              </div>
             </div>`;
            marker.on('click', function (e) {
              infoWindow.setContent(e.target.content);
              infoWindow.open(map, e.target.getPosition());
            });
          } else {
          }
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-popover__title {
  padding-left: 25px;
}
.map {
  position: relative;
}
.search {
  position: absolute;
  top: 25px;
  left: 60px;
}
.search_item {
  display: flex;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.near_item {
  display: flex;
}
.el-input__prefix,
.el-input__suffix {
  display: flex;
  align-items: center;
  margin-right: 5px;
  cursor: pointer;
}
.icon_ident {
  width: 200px;
  height: 39px;
  padding: 7px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  right: 150px;
  top: 24px;
  background: #fff;
}
.ic_ident {
  height: 25px;
}
.ic_name {
  font-size: 12px;
  position: relative;
  bottom: 6px;
  margin-left: 1px;
}
.back {
  width: 45px;
  height: 30px;
  cursor: pointer;
}
.contextmenu {
  background: #fff;
  position: fixed;
  z-index: 999;
}
.alarmArea {
  position: fixed;
  z-index: 999;
}
.contextmenu p {
  cursor: pointer;
  padding: 1px 25px 0;
}

.contextmenu p:hover {
  background: #ccc;
}
.tj_icon {
  position: absolute;
  right: 36px;
  top: 25px;
}
#map_box {
  margin: 0;
  padding: 0;
  width: 100%;
}
.butbox {
  background: #fff;
  margin-left: 40%;
  width: 20%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 50px;
  box-shadow: 0px 12px 12px 0px rgba(0, 0, 0, 0.1);
}
.butbox div {
  cursor: pointer;
}
.butbox > div > img {
  display: table-cell;
  vertical-align: middle;
}
.tc_dialog {
  width: 180px;
}
.el-drawer__header > :first-child {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #414141;
}
.el-drawer__open .el-drawer.rtl {
  overflow-y: auto;
  overflow-x: hidden;
}
.title {
  margin-left: 25px;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}
.line {
  display: flex;
  justify-content: space-around;
}
.monitj_icon {
  margin: 12px 0 0 0;
}
.trem {
  width: 110px;
  text-align: center;
}
.count {
  height: 36px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 42px;
  text-align: center;
}
.ident {
  height: 19px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a4a5a6;
  line-height: 22px;
}
.alarmTitle {
  display: flex;
  padding-top: 19px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  padding-bottom: 20px;
  position: fixed;
  width: 285px;
  z-index: 999;
  background: #fff;
}
.box {
  position: relative;
  height: 65px;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  justify-content: space-between;
}
// .verti_left {
// }
.hydrantName {
  font-weight: 700;
}
.param {
  color: #ca0303;
}
// .continue {
// }
.fontAa {
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 22px;
  /* margin-top: 6px; */
}
.drawerContent {
  overflow: auto;
  margin-top:40px;
}
.amap-icon img {
  width: 35px;
}
.tc_icon {
  width: 20px;
  height: 16px;
  position: relative;
  top: 2px;
}
span {
  font-size: 11px;
}
.info-middle img {
  float: left;
  margin-right: 6px;
}
.bot {
  display: flex;
  justify-content: space-between;
}
.dh_div {
  position: absolute;
  right: 20px;
  bottom: 270px;
  background: #fff;
  border-radius: 5px;
  border: #ccc 1px solid;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.alertCount {
}
.aaa {
  width: 330px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 2px;
  overflow-y: auto;
  z-index: 999;
  border-top: 1px solid #ccc;
  padding: 0 18px;
}
.overView {
  width: 545px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 0;
  overflow-y: auto;
  z-index: 999;
  border-top: 1px solid #ccc;
  padding: 0 18px;
}
.close_icon {
  background: #fff;
  text-align: right;
  padding: 5px 10px 0 0;
}
.el-popover__title {
  padding-left: 25px;
}
// .tc_ic {
//   width: 20px;
//   position: absolute;
//   top: 10px;
//   left: 7px;
// }
.bj_ic {
  width: 20px;
}
.tc_close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.item_box {
  padding: 0 5px 0 5px;
}
@media screen and (max-height: 900px) {
  .xjwb {
    height: 330px;
  }
}
.card {
  width: 295px;
  height: 250px;
  padding: 10px 20px;
  position: relative;
  bottom: 20px;
}
.name {
  font-size: 16px;
  background: #fff;
  color: #0b9ac3;
  font-weight: 700;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: relative;
  right: 108px;
}
.aaa_na {
  font-size: 16px;
  background: #fff;
  color: #0b9ac3;
  font-weight: 700;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: relative;
  right: 108px;
}
.card_content {
  background: #fff;
  font-size: 14px;
  color: #000000;
  padding: 0 10px 10px 10px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  right: 108px;
  display: flex;
}
.card_left {
  width: 120px;
}
.card_right {
  width: 130px;
}
.date {
  width:130px;
}
</style>
